<div class="rightsidebar">
  <div class="panel panel-default nm"> 
    <!-- Bootstrap Simple Tab -->
    <div class="panel-body np" data-ng-controller="TabsDemoCtrl">
      <tabset justified="true" class="tab-block"> <tab>
        <tab-heading> <i class="fa fa-user"></i></tab-heading>
        <h5 class="nm pad-10"> Friends <strong> Online </strong></h5>
        <div data-slim-scroll data-scroll-height="650px">
          <ul class="list-group">
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user3.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user4.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user5.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
          </ul>
          <h5 class="nm pad-10"> Friends <strong> Busy </strong></h5>
          <ul class="list-group">
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user6.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
          </ul>
          <h5 class="nm pad-10"> Friends <strong> Offline </strong></h5>
          <ul class="list-group">
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user6.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
          </ul>
        </div>
        </tab> <tab>
        <tab-heading> <i class="fa fa-comments"></i></tab-heading>
        <div data-slim-scroll data-scroll-height="640px">
          <h5 class="nm pad-10"> Chat <strong> List </strong></h5>
          <ul class="list-group">
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user3.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user4.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user5.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user6.png" alt="..." class="img-circle img40_40"> <i class="busy bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user6.png" alt="..." class="img-circle img40_40"> <i class="off bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user3.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user4.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
            <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user5.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
              <div class="inline-block">
                <div class="text-small ph-10">Chris Fox</div>
                <small class="text-small ph-10">Designer, Blogger</small> </div>
            </li>
          </ul>
        </div>
        </tab> 
        <tab>
        <tab-heading> <i class="fa fa-cog"></i></tab-heading>
        <div data-slim-scroll data-scroll-height="675px">
        <h5 class="nm pad-10"> Recent <strong> Messages </strong></h5>
        <ul class="list-group">
          <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user1.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
            <div class="inline-block">
              <div class="text-small ph-5">Andy sent you a message</div>
              <small class="text-small ph-5">15 minutes ago</small> </div>
          </li>
          <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user2.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
            <div class="inline-block">
              <div class="text-small ph-5">Andy sent you a message</div>
              <small class="text-small ph-5">15 minutes ago</small> </div>
          </li>
          <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user3.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
            <div class="inline-block">
              <div class="text-small ph-5">Andy sent you a message</div>
              <small class="text-small ph-5">15 minutes ago</small> </div>
          </li>
          <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user4.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
            <div class="inline-block">
              <div class="text-small ph-5">Andy sent you a message</div>
              <small class="text-small ph-5">15 minutes ago</small> </div>
          </li>
          <li class="list-group-item nb"> <a herf="javascript:void(0)" class="pull-left avatar"> <img src="images/photos/user5.png" alt="..." class="img-circle img40_40"> <i class="on bottom text-white"></i> </a>
            <div class="inline-block">
              <div class="text-small ph-5">Andy sent you a message</div>
              <small class="text-small ph-5">15 minutes ago</small> </div>
          </li>
        </ul>
        <h5 class="nm ph-10"> Real time <strong> Statistics </strong></h5>
        <p class="text-small pad-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
        <div class="ph-10">
            <span class="text-small">In Queue <span class="pull-right"> 45% </span> </span>
            <progressbar class="progressbar-xs progress-rounded progress-striped" value="68" type="info"></progressbar>
            <span class="text-small">Shipped Products <span class="pull-right"> 350/500 </span> </span>
            <progressbar class="progressbar-xs progress-rounded progress-striped" value="68" type="primary"></progressbar>
            <span class="text-small">Returned Products<span class="pull-right"> 50/500 </span> </span>
            <progressbar class="progressbar-xs progress-rounded progress-striped" value="68" type="warning"></progressbar>
            <span class="text-small">Pending Deliveries<span class="pull-right"> 150/500 </span> </span>
            <progressbar class="progressbar-xs progress-rounded progress-striped" value="68" type="danger"></progressbar>
        </div>
        <h5 class="nm pad-10"> Real time <strong> Discussion </strong></h5>
        <ul class="list-group">
          <li class="list-group-item nb"><span class="badge badge-primary">16</span> General topic </li>
          <li class="list-group-item nb"><span class="badge badge-info">12</span> The generated Lorem </li>
          <li class="list-group-item nb"><span class="badge badge-info">12</span> The generated Lorem </li>
        </ul>
        </div>
        </tab> 
      </tabset>
    </div>
    <!-- end Bootstrap Simple Tab --> 
  </div>
</div>
